<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
<title>Internet pizzeria - Manage configuration</title>

<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAGaVKsN7Fq_fEe0RJPADRCBT2yXp_ZAY8_ufC3CFXhHIE1NvwkxR_HUEVtZQfC_2K48p4H3BMNKsMCQ"
      type="text/javascript"></script>
<script type="text/javascript">

	var propertiesNames = new Array();
	var propertiesIsNumber = new Array();
	var geocoder = new GClientGeocoder();
	
	<c:forEach var="property" items="${properties}">
		propertiesNames.push("${property.key}");
		propertiesIsNumber.push(${property.isNumber});
	</c:forEach>	
	
	function validateProperties(){
		for(var i=0; i<propertiesNames.length; i++){		
			var propertyElem = document.getElementById(propertiesNames[i]);			
			if (propertiesIsNumber[i] && (isNaN(propertyElem.value) || propertyElem.value == "")){
				alert("Property "+propertiesNames[i]+" should be a number.");
				return false;
			}
		}
		return true;
	}
	
	function validateForm(){	
		if (validateProperties()){
			geocoder = new GClientGeocoder();  
			var addressElem = document.getElementById("PizzeriaAddress");
		   	checkAddress(addressElem.value);   
	    }
  }
  
  function checkAddress(address) {
      if (geocoder) {
        geocoder.getLatLng(
          address,
          function(point) {
            if (!point) {
                alert("Address " + address + " not found");                           
            } else {      
            	document.getElementById("PizzeriaAddressLat").value = point.lat(); 
            	document.getElementById("PizzeriaAddressLng").value = point.lng();         	
               	document.getElementById("form").submit();	    			    	
            }            
          }
        );
      }
    }
</script>
</head>
<body>	
<%@ include file="navigationMenu.jsp" %>
	<form method="post" id="form" action="manageConfiguration">
	
	<h2>Manage configuration properties</h2>	
	<table border='1'>
	<tr>
			<td>Property key</td>
			<td>Property value</td>
	</tr>
	<c:forEach var="property" items="${properties}">
	<tr>
		<td>${property.key}</td>
		<td><input type="text" id="${property.key}" name="${property.key}" value="${property.value}" /></td>
	</tr>
	</c:forEach>	
	</table>
	<input type="hidden" id="PizzeriaAddressLat" name="PizzeriaAddressLat" />
	<input type="hidden" id="PizzeriaAddressLng" name="PizzeriaAddressLng" />
	<input type="button" value="Save" onclick="validateForm()" />
	</form>		
</body>
</html>
